<template>
  <div>
    <div>
      <a-radio-group v-model:value="showType">
        <a-radio-button value="b">列显示</a-radio-button>
        <a-radio-button value="a">实时图表显示</a-radio-button>
        <a-radio-button value="c" @click="selectTime">历史记录</a-radio-button>
      </a-radio-group>
    </div>
    <a-tabs v-model:activeKey="activeKey" centered>
      <a-tab-pane key="1" tab="PV统计">
        <stat-show v-if="activeKey==='1'&&showType==='a'"  type="0" title="PV统计/次"></stat-show>
        <stat-line v-if="activeKey==='1'&&showType==='b'" type="0" title="DNS阻断/次"></stat-line>
        <stat-line-time v-if="activeKey==='1'&&showType==='c'&&cTime" :time="cTime" type="0" title="DNS阻断/次"></stat-line-time>
      </a-tab-pane>
      <a-tab-pane key="2" tab="UV统计" force-render>
        <stat-show v-if="activeKey==='2'&&showType==='a'" type="1" title="UV统计/次"></stat-show>
        <stat-line v-if="activeKey==='2'&&showType==='b'" type="1" title="DNS阻断/次"></stat-line>
        <stat-line-time v-if="activeKey==='2'&&showType==='c'&&cTime" :time="cTime"  type="1" title="DNS阻断/次"></stat-line-time>
      </a-tab-pane>
      <a-tab-pane key="3" tab="IP访问量">
        <stat-show v-if="activeKey==='3'&&showType==='a'" type="2" title="IP访问量/次"></stat-show>
        <stat-line v-if="activeKey==='3'&&showType==='b'" type="2" title="DNS阻断/次"></stat-line>
        <stat-line-time v-if="activeKey==='3'&&showType==='c'&&cTime" :time="cTime"  type="2" title="DNS阻断/次"></stat-line-time>
      </a-tab-pane>
      <a-tab-pane key="4" tab="上传量">
        <stat-show v-if="activeKey==='4'&&showType==='a'" type="3" title="上传量/GB"></stat-show>
        <stat-line v-if="activeKey==='4'&&showType==='b'" type="3" title="DNS阻断/次"></stat-line>
        <stat-line-time v-if="activeKey==='4'&&showType==='c'&&cTime" :time="cTime"  type="3" title="DNS阻断/次"></stat-line-time>
      </a-tab-pane>
      <a-tab-pane key="5" tab="下载量">
        <stat-show v-if="activeKey==='5'&&showType==='a'" type="4" title="下载量/GB"></stat-show>
        <stat-line v-if="activeKey==='5'&&showType==='b'" type="4" title="DNS阻断/次"></stat-line>
        <stat-line-time v-if="activeKey==='5'&&showType==='c'&&cTime" :time="cTime"  type="4" title="DNS阻断/次"></stat-line-time>
      </a-tab-pane>
      <a-tab-pane key="6" tab="DNS命中">
        <stat-show v-if="activeKey==='6'&&showType==='a'" type="5" title="DNS命中/次"></stat-show>
        <stat-line v-if="activeKey==='6'&&showType==='b'" type="5" title="DNS阻断/次"></stat-line>
        <stat-line-time v-if="activeKey==='6'&&showType==='c'&&cTime" :time="cTime"  type="5" title="DNS阻断/次"></stat-line-time>
      </a-tab-pane>
      <a-tab-pane key="7" tab="DNS阻断">
        <stat-show v-if="activeKey==='7'&&showType==='a'" type="6" title="DNS阻断/次"></stat-show>
        <stat-line v-if="activeKey==='7'&&showType==='b'" type="6" title="DNS阻断/次"></stat-line>
        <stat-line-time v-if="activeKey==='7'&&showType==='c'&&cTime" :time="cTime"  type="6" title="DNS阻断/次"></stat-line-time>
      </a-tab-pane>
    </a-tabs>


    <a-modal v-model:visible="open" title="时间选择">
      <a-radio-group v-model:value="cTime">
        <a-radio :value="item.date" v-for="(item,index) in hTime" :key="index">{{item.date}}</a-radio>
      </a-radio-group>
      <template #footer>
        <a-button  @click="selectTime">确定</a-button>
      </template>
    </a-modal>


  </div>

</template>

<script setup>
import {onMounted, ref} from 'vue';
import StatShow from "./chat/stat-show.vue";
import StatLine from "./chat/stat-line.vue";
import StatLineTime from "./chat/stat-line-time.vue";
import {getStatisticsGroup, getStatisticsTypeTime} from "../../api/client/home.js";
const activeKey = ref('1');
const  showType = ref('b')

const hTime=ref([])
const cTime=ref('')
const open=ref(false)

onMounted(()=>{
  getStatisticsGroup().then(res=>{
    hTime.value=res.data
  })
})

const selectTime = () => {
  open.value=!open.value
}

</script>

<style scoped>

</style>
